Day 22 - 將 Yacht Manager 後台儲存資料提取後，送至前台渲染首頁 Home 頁面 (上) - 輪播圖區 - ASP.NET Web Forms C#

13th鐵人賽 c# asp.net webforms

龜人

團隊卍乂卍火箭隊卍乂卍aka生命魔法研究社

2021-10-06 10:06:29

1373 瀏覽

分享至

=x= 🌵 Home 前台頁面 - 輪播圖後端功能製作。

Home 頁面 - 輪播圖資料介紹 :

📌 Home 頁面 - 遊艇型號輪播圖內容 :

1. 每個遊艇型號只會出現一張圖。

2. 右下角的遊艇型號文字會配合更換。

3. 左上角的特殊標註圖片標籤會配合顯示加註。

Home 輪播圖內容後端實作 :

1. 新增 index.aspx 將原始 index.html 的`<head>`及`<body>`內的內容分別複製到 .aspx 檔案中。

2. 刪除與 VIEWSTATE 有關的程式碼。

3. 使用取代功能將 .html 都取代為 .aspx。

👀 以上操作可參考 Day 9 文章內容。

4. 遊艇型號輪播圖使用 Literal 控制項來送圖片內容，細節參考如下 :

紫色底線 : 由於此區塊版面有點沒對齊，增加樣式調整對齊。
紅色區塊 : 為主要輪播圖接收區塊。
藍色區塊 : 為相簿功能插件的縮圖區，外層<div>原始設定為不顯示。

👺 不顯示但插件輪播數量的計算是依此區計算，直接放入與紅色區塊相同內容。

5. 後端 index.aspx.cs 的 Page_Load 事件加入 loadBanner(); 方法

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadBanner();
    }
}

6. 建立讀取輪播圖內容 loadBanner(); 方法

private void loadBanner()
{
    //用 List<T> 接收 Json 格式圖片資料
    List<ImagePath> savePathList = new List<ImagePath>();
    //連線資料庫取出圖片資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sqlLoad = "SELECT * FROM Yachts ORDER BY id DESC";
    SqlCommand command = new SqlCommand(sqlLoad, connection);
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    StringBuilder bannerHtml = new StringBuilder();
    while (reader.Read()) {
        string loadJson = HttpUtility.HtmlDecode(reader["bannerImgPathJSON"].ToString());
        savePathList = JsonConvert.DeserializeObject<List<ImagePath>>(loadJson);
        //每個型號只取出第一張圖
        string imgNameStr = "";
        if (savePathList?.Count > 0) {
                        // 指定選取 List<T> 第一筆資料
            imgNameStr = savePathList[0].SavePath;
        }
        //遊艇型號字串用空格切割區分文字及數字
        string[] modelArr = reader["yachtModel"].ToString().Split(' ');
        //依新設計或新建造來切換顯示標籤
        string isNewDesignStr = reader["isNewDesign"].ToString();
        string isNewBuildingStr = reader["isNewBuilding"].ToString();
        string newTagStr = ""; //標籤檔名用
        // value 預設為 0 不顯示標籤
        string displayNewStr = "0";
        //判斷是否顯示對應標籤
        if (isNewDesignStr.Equals("True")) {
            displayNewStr = "1";
            newTagStr = "images/new02.png";
        }
        else if (isNewBuildingStr.Equals("True")) {
            displayNewStr = "1";
            newTagStr = "images/new01.png";
        }
        //加入遊艇型號輪播圖 HTML
        bannerHtml.Append($"<li class='info' style='border-radius: 5px;height: 424px;width: 978px;'><a href='' target='_blank'><img src='upload/Images/{imgNameStr}' style='width: 978px;height: 424px;border-radius: 5px;'/></a><div class='wordtitle'>{modelArr[0]} <span>{modelArr[1]}</span><br /><p>SPECIFICATION SHEET</p></div><div class='new' style='display: none;overflow: hidden;border-radius:10px;'><img src='{newTagStr}' alt='new' /></div><input type='hidden' value='{displayNewStr}' /></li>");
    }
    connection.Close();
    //渲染畫面
    LitBanner.Text = bannerHtml.ToString();
    LitBannerNum.Text = bannerHtml.ToString(); //不顯示但影響輪播圖片數量計算
}

//輪播圖 JSON 資料
public class ImagePath
{
    public string SavePath { get; set; }
}

🌵 用savePathList[0].SavePath 指定選取 List<T> 第一筆資料。

7. 模擬頁面檢查是否正確呈現，完成~

本日總結 :

📢 今天的內容最容易卡住的地方就是要看懂輪播圖的運作邏輯，需要特別去看放在 <head> 裡的 JavaScript 來推測，在製作時最容易鬼打牆的地方，就是明明設定為不顯示的輪播圖縮圖，卻是用來計算輪播圖片總數的內容，如果一開始就把這個區塊刪掉，就會一直卡在為何都有顯示畫面，後端取資料也都有取到，但輪播圖不會動；或是沒有刪除縮圖區塊，就會發現輪播圖會動，但輪播的圖片永遠只有5張，回頭去看 JavaScript 的控制輪播區塊的程式碼，就會發現判斷次數是用縮圖區塊的 '.title ul li.on' ，可以知道是用 <li> 標籤有幾組來決定輪播的次數。